import React, {
	Component
} from 'react';
import {
	observer,
} from 'mobx-react';
import {
	withRouter
} from 'react-router-dom';
import {
	RouteLayout,
	SearchAdvanced,
} from 'weaver-mobile-page';
import {
	Icon,
	Tools,
	WingBlank,
	WhiteSpace,
} from 'weaver-mobile';
import { Timeline } from 'weaver-mobile';
import {isEmpty} from "lodash";
import Dot from "./Dot.js";
import IconDot from "./IconDot.js";
import NoData from "./NoData.js";
const getLabel = Tools.getLabel;

@withRouter
@observer
export default class Details extends Component {
	handleScroll = (event) => {
		const {
			scrollHeight,
			scrollTop,
			clientHeight
		} = event.target;

		if ((parseInt(scrollTop) + clientHeight) === scrollHeight) {
			const {
				isLoadAllDatas,
				loadKqDetailInfo,
			} = this.props.store;

			if (!isLoadAllDatas) {//数据没有加载完毕
				loadKqDetailInfo({
					isScroll: true,
					type:(this.props.type === "absence") ? "detail" : "detail-with-search"
				})
			}
		}
	}

	componentWillUnmount() {
		const {
			changeTitle,
			mainTitle
		} = this.props.store;

		changeTitle(mainTitle);
	}

	componentWillReceiveProps(nextProps) {
		if (!nextProps.location.pathname.includes("kqDetailSearch")) {
			const {
				changeTitle,
				detailTitle
			} = this.props.store;

			changeTitle(detailTitle);
		}
	}

	render() {
		const {
			store,
			isPresentSearch,
			title,
			history,
			type,
		} = this.props, {
			kqDetailInfo,
			kqDetailSearch,
			subKqDetailSearch,
			overtimeSearch,
			subOvertimeSearch,
			loadKqDetailInfo,
			changeTitle,
			isSubordinate,
			kqtype,
		} = store;

		let search;
		if (!isSubordinate ) {
			search = (kqtype == "OVERTIME") ? overtimeSearch : kqDetailSearch;
		}else{
			search = (kqtype == "OVERTIME") ? subOvertimeSearch : subKqDetailSearch;
		}

		return (
			<RouteLayout>
				<div key="wmPoutePageDemo" className={`wm-route-layout wm-demo-route-layout-page ${isPresentSearch ? "attendance-actualDetail" : "attendance-absenceDetail"}`}>
					{
						!isEmpty(kqDetailInfo) ? (
							<div onScroll={event => this.handleScroll(event)}>
								{isPresentSearch && <Timeline>
									<Timeline.Item dot={<IconDot />}>
										<div className="attendance-actualDetail-top">
											<span>{title}</span>
											<Icon type="filter-o" size="xxs" onClick={()=> {
												changeTitle(getLabel(347,"高级搜索"));
												history.push(search.path)}
											}/>
										</div>
									</Timeline.Item>
								</Timeline>}
								<Timeline>
									{
										kqDetailInfo.map( (info,index) => {
											return (
												<Timeline.Item key={index} dot={<Dot />}>
													<ul className={`attendance-actualDetail-item ${type ? type : ""}`}>
														{
															info.map( (item,index) => {
																const {label, value} = item;

																return (
																	<li key={label}>
																		<span>{`${label} ${label ? ':' : ''} `}</span>
																		<span>{value}</span>
																	</li>
																)
															})
														}
													</ul>
												</Timeline.Item>
											)
										}) 
									}
								</Timeline>
							</div>
						): (
							<div className="attendance-actualDetail-noData">
								<Icon type="filter-o" size="xxs" onClick={()=> {
									changeTitle(getLabel(347,"高级搜索"));
									history.push(search.path)}
								}/>
								<NoData />
							</div>
						)
					}
					<SearchAdvanced store={search} onSubmit={() => loadKqDetailInfo({isScroll: false, type:"detail-with-search"})}/>
				</div>
			</RouteLayout>
		);
	}
}